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• History of Team Fortress 

• Characters 

• Art direction 

• Shading algorithms 

• Environments 

• Meet the Team 

• Post-ship 

• Sneak Peek of the next Meet the Team short! 



























INITIAL TEAM FORTRESS 2 









WHY THE UNIQUE VISUAL STYLE? 


• Gameplay 

• Readability 

• Branding 













READ HIERARCHY 

• Tearn - Friend or Foe ? 

• Color 

• Class - Run or Attack? 

• Distinctive silhouettes 

• Body proportions 

• Weapons 

• Shoes, hats and clothing folds 

• Selected weapon - What’s he packin’? 

• Highest contrast at chest level, where weapon is held 

• Gradient from dark feet to light chest 



Color Swatch 













Norman Rockwell 











EARLY 20TH CENTURY COMMERCIAL ILLUSTRATION 


• Chose to adopt specific conventions of the 
commercial illustrator J. C. Leyendecker: 

• Shading obeys a warm-to-cool hue shift. Shadows go to 
cool, not black 

• Saturation increases at the terminator with respect to a given 
light source. The terminator is often reddened. 

• On characters, interior details such as clothing folds are 
chosen to echo silhouette shapes 

• Silhouettes are often emphasized with rim highlights rather 
than dark outlines 






Clothing Folds 


J.C. Leyendecker 
Thanksgiving 1628-1928 


J.C. Leyendecker 
Tally-Ho, 1930 


Ji* 






























J.C. Leyendecker 
Arrow collar advertisement, 1929 



J.C. Leyendecker 
Swimmin’ Hole, 1935 











































CHARACTER CREATION 


1. Character silhouette 

2. Interior shapes 

3. Model sheet 

4. 3D Model 

5. Character Skin 

6. Final Character in game 















• Building block of character design 

• Identifiable at first read 












INTERIOR SHAPES 


• Solving interior character 
design with shadow shapes 

• Keep it iconic 

• Work out design in three 
quarter pose 








MODEL SHEET 


# 




Use concept painting as 
guide 

Solve design problems using 
silhouette only 

Solve interior design with 
shadow shapes 















3D MODEL 


• Match silhouette to model 
sheet 

• Solve 3 quarter design with 
screenshots / paintovers 

• Model with character in mind 









































PINAL CHARACTER 







ENGINEER CONCEPT 















ENGINEER MODEL 


























































CHARACTER SHADING ALGORITHM 


• Previous work in Non-Photorealistic Rendering 

• Character lighting equation in Team Fortress 2 






GOOCH, 1998 


# 



Hue and luminance shifts indicate surface 
orientation relative to light 

Blend between warm and cool based upon 
unclamped Lambertian term, underlying albedo 
and some free parameters 

Extreme lights and darks are reserved for edge 
lines and highlights 


Conventional Gooch 
Shading Shading 


















HALF LAMBERT 


• Typically clamp 
N-L to zero at the 
terminator 

• Half Lambert —^- 

scales the -1 to 1 

cosine term (red 
curve) by V 2 , 
biases by V 2 and 
squares to pull the 
light all the way 
around (blue 
curve) 

• We have been applying this 
curve since Half-Life in 1998 

• Similar to Exaggerated Shading 
[Rusinkiewicz06] 























• Lake used a 1D texture lookup 
based upon the Lambertian term 
to simulate the limited color 
palette cartoonists use for 
painting cels 

• Also allows for the inclusion of a 
view-independent pseudo 
specular highlight by including a 
small number of bright texels at 
the “lit” end of the 1D texture map 
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BARLA, 2006 


• Barla has extended this technique by using a 2D texture lookup to 
incorporate view-dependent and level-of-detail effects. 

• Fresnel-like creates a hard “virtual backlight” which is essentially a 
rim-lighting term, though this term is not designed to correspond to 
any particular lighting environment. 




























CHARACTER LIGHTING EQUATION 



vICW INDEPENDENT 




view-dependent 



















VIEW INDEPENDENT TERMS 



Spatially-varying directional 
ambient 























• Spatially-varying directional 
ambient 

• Modified Lambertian terms 










VIEW INDEPENDENT TERMS 



• Spatially-varying directional 
ambient 

• Modified Lambertian terms 

• Undamped Lambertian term 
























VIEW INDEPENDENT TERMS 
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• Spatially-varying directional 
ambient 


• Modified Lambertian terms 

• Undamped Lambertian term 

• Scale, bias and exponent 

























VIEW INDEPENDENT TERMS 



Spatially-varying directional 
ambient 

Modified Lambertian terms 

• Undamped Lambertian term 

• Scale, bias and exponent 


• Warping function 

































• Spatially-varying directional 
ambient 


• Modified Lambertian terms 

• Undamped Lambertian term 

• Scale, bias and exponent 

• Warping function 






















VIEW INDEPENDENT TERMS 



• Spatially-varying directional 
ambient 

• Modified Lambertian terms 

• Undamped Lambertian term 

• Scale, bias and exponent 

• Warping function 

• Albedo 



















VIEW INDEPENDENT TERMS 



• Spatially-varying directional 
ambient 

• Modified Lambertian terms 

• Undamped Lambertian term 

• Scale, bias and exponent 

• Warping function 

• Albedo 






















• Multiple Phong terms per light 


















• Multiple Phong terms per light 
• k nm broad, constant exponent 











• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 




















• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k exponent (constant or texture) 

• f s artist tuned Fresnel term 
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• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 




















i =1 


• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 












Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 

• k s specular mask texture 

















spec 


Multiple Phong terms per light 

• k rim broad, constant exponent 

exponent (constant or texture) 
artist tuned Fresnel term 
rim Fresnel term, (l-(n-v )) 4 
rim mask texture 
specular mask texture 
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Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 

• k s specular mask texture 




















Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 

• k s specular mask texture 





















i=l 


• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 

• k s specular mask texture 

• Dedicated rim lighting 

• a(v) Directional ambient evaluated with v 








i=l 


• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k spec exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 

• k s specular mask texture 

• Dedicated rim lighting 

• a(v) Directional ambient evaluated with v 

• k r same rim mask 














• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 

• k s specular mask texture 

• Dedicated rim lighting 

• a(v) Directional ambient evaluated with v 

• k r same rim mask 

• f r same rim Fresnel 
























• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 

• k s specular mask texture 

• Dedicated rim lighting 

• a(v) Directional ambient evaluated with v 

• k r same rim mask 

• f r same rim Fresnel 

• n-u term that makes rim highlights tend to 
come from above {u is up vector) 
















• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 

• k s specular mask texture 

• Dedicated rim lighting 

• a(v) Directional ambient evaluated with v 

• k r same rim mask 

• f r same rim Fresnel 

• n-u term that makes rim highlights tend to 
come from above (u is up vector) 
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• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 

• k s specular mask texture 

• Dedicated rim lighting 

• a(v) Directional ambient evaluated with v 

• k r same rim mask 

• f r same rim Fresnel 

• n-u term that makes rim highlights tend to 
come from above (u is up vector) 





















• Multiple Phong terms per light 

• k rim broad, constant exponent 

• k exponent (constant or texture) 

• f s artist tuned Fresnel term 

• f r rim Fresnel term, (l-(n-v )) 4 

• k r rim mask texture 

• k s specular mask texture 

• Dedicated rim lighting 

• a(v) Directional ambient evaluated with v 

• k r same rim mask 

• f r same rim Fresnel 

• n-u term that makes rim highlights tend to 
come from above {u is up vector) 














ENVIRONMENT DESIGN 


• Creating a compelling, 
immersive world 

• Team distinction through 
material hue/value/saturation. 

• Impressionistic painterly look 















CONTRASTING TEAM PROPERTIES 


• Red 

• Warm colors 

• Natural materials 

• Angular geometry 

• Blue 

• Cool colors 

• Industrial materials 

• Orthogonal forms 
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MIYAZAKI - BRUSH WIDTH FORESHORTENED 
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• Can easily imagine a 3D camera 
move between these 2D views of 
the same space 








Texture map 
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I n-game Screenshot 




















WORLD TEXTURING 






































WORLD TEXTURING 












































MODEL TEXTURING 














• Defined personalities and 
archetypes up front 

• Consistent voice casting 

• In-game taunt animations and 
context-sensitive emotes 

• “So much blood...” 

• Meet the Team shorts 

• Character vignette movies 
rendered with game engine 

• Game assets except: 

• Up-rezzed hands 

• More facial morph targets 

• More facial wrinkle maps 

• We find ourselves mixing the 
terms “Class” and “Character” 









HOW DID TAN? REACT? 












WHERE DO WE GO FROM HERE? 






Successful multiplayer games live for a long time 
Regular updates via Steam 

• Shipped 28 times since the Beta in September 

• New features, code optimizations and exploit fixes 

• This is why we built Steam & Steamworks in the first place 

• Steam is not just a digital distribution system 

• Can ship updates extremely quickly and fully engage the community 


(§^^^>STEAM 
STEAMWORKS " 


Extend experience for dedicated players 

• Maps 

• Game modes 

• Achievements 

Unlockable weapons in Team Fortress 2 

• Can ship more quickly than new maps and game modes 












• Things to look for... 

• Distinct character classes 


• Shape and Shading 

• Analogous color palette 

• Painterly world texturing 









• History 

• Characters 

• Art direction 

• Shading algorithms 

• Environments 

• Meet the Team 

• Post-ship 

• Meet the Scout 
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READING LIST 


• Art History, Cinematography & Graphic Design 

• Painting with Light by John Alton 

• The Science of Art: Optical Themes in Western Art from 
Brunelleschi to Seurat by Martin Kemp 

• Secret knowledge: Rediscovering the Lost Techniques 
of the Old Masters by David Hockney 

• On Reflection by Jonathan Miller 

• Anything by Edward Tufte or Marcel Minnaert 
















